<template>
  <div class="sidebar">
    <div class="new-chat">
      <button @click="createNewSession">新建对话</button>
    </div>
    <div class="history">
      <div 
        v-for="session in sessions" 
        :key="session.id"
        class="session-item"
        :class="{ active: session.id === currentSession?.id }"
        @click="selectSession(session.id)"
      >
        {{ session.title }}
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <div v-if="showConfirm" class="confirm-dialog">
      <p>确定删除此对话？</p>
      <div class="dialog-actions">
        <button @click="showConfirm = false">取消</button>
        <button @click="confirmDelete">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  sessions: Array,
  currentSession: Object,
});

const emit = defineEmits(["select-session", "new-session"]);

const createNewSession = () => {
  const newSession = {
    id: Date.now(),
    title: `对话 ${new Date().toLocaleString()}`,
    messages: []
  };
  emit("new-session", newSession);
};

const formatDate = (date) => {
  return new Date(date).toLocaleTimeString([], {
    hour: "2-digit",
    minute: "2-digit",
  });
};

const selectSession = (id) => {
  emit("select-session", id);
};
</script>

<style scoped>
.sidebar {
  width: 260px;
  background: #fff;
  height: 100vh;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.new-chat {
  margin: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #6B8DD6 0%, #8E37D7 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(106, 80, 226, 0.2);
}

.new-chat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(106, 80, 226, 0.3);
}

.sessions {
  padding: 10px;
}

.session-item {
  position: relative;
  padding: 12px 16px;
  margin: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  font-size: 14px;
  color: #333;
}

.session-item:hover {
  background: #f8f9fa;
  border-color: #e5e7eb;
}

.session-item.active {
  background: #f5f2ff;
  border-color: #8E37D7;
  color: #8E37D7;
  font-weight: 500;
}

.session-item::before {
  content: "🗨️";
  margin-right: 12px;
  opacity: 0.8;
  font-size: 16px;
}

.delete-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6b7280;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.2s;
}

.session-item:hover .delete-btn {
  opacity: 1;
}

.confirm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  width: 320px;
  text-align: center;
}

.dialog-actions button {
  margin: 0 8px;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.dialog-actions button:last-child {
  background: #007bff;
  color: white;
}
</style>
